<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="query.materielCode" placeholder="物料代码" style="width: 130px;" class="filter-item" @keyup.enter.native="search" />
      <el-input v-model="query.materielName" placeholder="物料名称" style="width: 130px;" class="filter-item" @keyup.enter.native="search" />

      <el-button style="margin-left:20px;" class="filter-item" type="primary" icon="el-icon-search" @click="search">{{ $t('table.search') }}</el-button>

      <el-upload class="filter-item" action="" multiple :limit="1" :on-exceed="handleExceed" :http-request="uploadActionUrl">
        <el-button icon="el-icon-upload" type="primary" class="filter-item" style="margin-top: 10px;margin-left: 10px;">{{ $t('scm.impPurchaseDetailData') }}</el-button>
      </el-upload>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click="deletePurchaseDetail">{{ $t('scm.deletePurchaseDetail') }}</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" highlight-current-row border>
      <el-table-column prop="id" label="系统编号" sortable />
      <el-table-column prop="auditFlag" label="审核标志" sortable />
      <el-table-column prop="billNo" label="单据编号" sortable />
      <el-table-column prop="materielCode" label="物料长代码" sortable />
      <el-table-column prop="materielName" label="物料名称" sortable />
      <el-table-column prop="auxprop" label="辅助属性" sortable />
      <el-table-column prop="unit" label="单位" sortable />
      <el-table-column prop="num" label="数量" sortable />
      <el-table-column prop="instoreNum" label="入库数量" sortable />
      <el-table-column prop="noInStoreNum" label="未入库数量" sortable />
      <el-table-column label="交货日期">
        <template slot-scope="{row}">
          <span>{{ row.deliveryDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tmemo" label="备注" sortable />
      <el-table-column prop="supplier" label="供应商" sortable />
      <el-table-column prop="deliveryPlace" label="送货地点" sortable />
      <el-table-column prop="modelType" label="规格型号" sortable />
      <el-table-column prop="summary" label="摘要" sortable />
      <el-table-column prop="closeFlag" label="关闭标志" sortable />
      <el-table-column prop="businessCloseFlag" label="行业务关闭标志" sortable />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize" @pagination="getInfo" />

  </div>
</template>

<script>
import { getInfo, deleteAll, impData } from '@/api/purchaseDetail'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'PurchaseDetail',
  components: { Pagination },
  directives: { waves },
  data() {
    return {

      dialogVisible: false,
      dialogType: 'new',
      total: 0,
      query: {
        chooseYear: '',
        pageIndex: 1,
        pageSize: 20,
        materielCode: '',
        materielName: ''
      },
      tableData: []
    }
  },
  created() {

  },
  mounted() {
    const date = new Date()
    const year = date.getFullYear()
    console.log(year)
    this.query.chooseYear = year + ''
    this.getInfo()
  },
  methods: {
    getInfo() {
      getInfo(this.query).then((res) => {
        this.tableData = res.data.items
        this.total = res.data.totalItems
      })
    },
    search() {
      this.query.pageIndex = 1
      this.getInfo()
    },
    async deletePurchaseDetail() {
      this.$confirm('确认删除?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteAll()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch((err) => console.error(err))
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
    },
    // 上传文件
    uploadActionUrl(item) {
      console.log(item)
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      console.log(JSON.stringify(form))
      // let formTwo = JSON.stringify(form)
      impData(form).then((response) => {
        console.log('MediaAPI.upload')
        console.log(response)
        this.$message.info('文件：' + fileObj.name + '上传成功')
      })
    }
  }
}
</script>
